<template>
  <div>
    <div class="tools">
        <el-button size="small" @click="addRule" v-if="table=='filter'">添加规则</el-button>
        <el-button size="small" @click="flushMetrics('')">清零计数</el-button>
        <el-button size="small" @click="flushRule()">清空规则</el-button>
        <el-button size="small" @click="reload">刷新列表</el-button>
        <div class="tools_left">规则数：{{list.length}} </div>
        <div class="tools_left">|</div>
        <div class="tools_left">默认策略：{{obj.policy}}</div>
        <div class="tools_left">|</div>
        <div class="tools_left">过滤包数：{{obj.packets}}</div>
        <div class="tools_left">|</div>
        <div class="tools_left">数据量(字节)：{{obj.bytes}}</div>
    </div>
    <el-table size="small" :data="list" style="width: 100%">
        <el-table-column prop="num" label="num" width="60" align="center"></el-table-column>
        <el-table-column prop="pkts" label="pkts" align="center" header-align="center"></el-table-column>
        <el-table-column prop="bytes" label="数据量(字节)" align="center" header-align="center"></el-table-column>
        <el-table-column prop="target" label="策略" align="center"></el-table-column>
        <el-table-column prop="prot" label="协议" align="center"></el-table-column>
        <el-table-column prop="action" label="协议端口" align="center">
            <!-- <template slot-scope="scope">
                <span v-if="!scope.row.action">all</span>
                <span v-else>{{scope.row.action}}</span>
            </template> -->
        </el-table-column>
        <el-table-column prop="source" label="源地址" align="center"></el-table-column>
        <el-table-column prop="in" label="in" align="center"></el-table-column>
        <el-table-column prop="out" label="out" align="center"></el-table-column>
        <el-table-column prop="opt" label="opt" align="center"></el-table-column>
        <el-table-column prop="destination" label="操作" align="center">
        <template slot-scope="scope">
            <el-button type="text" @click="flushMetrics(scope.row.num)">清零</el-button>
            <el-button type="text" @click="deleteRule(scope.row.num)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>

    <el-dialog
      title="添加规则"
      :visible.sync="saveVisible"
      :close-on-click-modal="false"
      width="30%">
      <el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="规则策略" prop="policy">
          <el-select v-model="ruleForm.policy" placeholder="请选择规则策略" style="width:100%;">
            <el-option label="ACCEPT(允许)" value="ACCEPT"></el-option>
            <el-option label="DROP(拒绝)" value="DROP"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="端口协议" prop="prot">
          <el-select v-model="ruleForm.prot" placeholder="请选择端口协议" style="width:100%;">
            <el-option label="全部协议" value="all"></el-option>
            <el-option label="TCP" value="TCP"></el-option>
            <el-option label="UDP" value="UDP"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="端口号" prop="port">
          <el-input v-model="ruleForm.port" :disabled="ruleForm.prot=='all'" placeholder="请填写端口号"></el-input>
        </el-form-item>
        <el-form-item label="源地址" prop="source">
          <el-input v-model="ruleForm.source" placeholder="填写IP地址，限定一个，例如：223.75.204.112"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="saveVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
    data(){
        return{
            table:'',
            chain:'',
            list:[],
            obj:{},
            outputObj:{},
            forwardObj:{},
            saveVisible:false,
            ruleForm:{
                policy:'',
                prot:'',
                source:'',
                port:''
            },
            rules: {
                policy: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ],
                prot: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ],
                source: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        intData(table,chain){
            this.table = table;
            this.chain = chain;
            this.getList();
        },
        reload(){
            this.getList();
        },
        getList(){
            this.inputList = [];
            this.forwardList = [];
            this.outputList = [];
            this.$http.post('/api/listRule?table='+this.table+"&chain="+this.chain).then(({
                    data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                var systemList = res.data.system;
                if(systemList){
                    systemList.forEach(element => {
                        if(element){
                            this.obj = element.title;
                            this.list = element.list;
                        }
                    });
                }
            }).catch(() => {})
        },
        flushMetrics(id){
            this.$confirm('是否清零计数?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                var url = '';
                if(id){
                    url = '/api/flushMetrics?table='+this.table+'&chain='+this.chain+'&id='+id;
                }else{
                    url = '/api/flushMetrics?table='+this.table+'&chain='+this.chain;
                }
                this.$http.post(url).then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '清零计数成功!'
                    });
                }).catch(() => {})
                }).catch(() => {         
            });
        },
        flushRule(){
            this.$confirm('是否清空规则?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$http.post('/api/flushRule?table='+this.table+'&chain='+this.chain).then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '清空规则成功!'
                    });
                }).catch(() => {})
                }).catch(() => {         
            });
        },
        deleteRule(id){
            this.$confirm('是否删除规则?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$http.post('/api/deleteRule?table='+this.table+'&chain='+this.chain+'&id='+id).then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '删除规则成功!'
                    });
                }).catch(() => {})
                }).catch(() => {         
            });
        },
        addRule(){
            this.saveVisible = true;
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var command = "";
                    if(this.ruleForm.prot=='all'){
                        command = " -t "+this.table+" -I INPUT "+" -s "+this.ruleForm.source+" -j "+this.ruleForm.policy
                    }else{
                        command = " -t "+this.table+" -I INPUT -p "+this.ruleForm.prot+" --dport "+this.ruleForm.port+" -s "+this.ruleForm.source+" -j "+this.ruleForm.policy
                    }
                    console.log(command)
                    this.$http.post('/api/exec?args='+command).then(({
                        data: res
                    }) => {
                        if (res.code !== 0) {
                            return this.$message.error(res.msg)
                        }
                        this.getList()
                        this.saveVisible = false;
                        this.ruleForm = {};
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    }).catch(() => {})
                } else {
                    return false;
                }
            });
        }
    }
}
</script>
<style scoped>
  .tools{
    display: flex;
    margin-bottom:10px;
    align-items: center;
  }

  .tools_left{
    margin-left:10px;
  }
</style>